<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-06-07 16:04:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-08 20:59:16
-->
<template>
  <div>
    <!-- 表单 搜索 -->
    <div>
      <el-row>
        <el-col :span="20">
          <el-form size="small" :inline="true" :model="param">
            <el-form-item>
              <el-input v-model="param.id" placeholder="请输入id"   clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="findById">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 显示数据 -->
    <div>
      <el-table :data="orders" size="small">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间">
          <template v-slot="scope">
            {{scope.row.orderTime  | fmtDate}}
          </template> 
      </el-table-column>
      <el-table-column prop="serviceTime" label="服务时间">
          <template v-slot="scope">
            {{scope.row.serviceTime  | fmtDate}}
          </template> 
      </el-table-column>
        <el-table-column prop="total" label="总价"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="customerId" label="顾客ID"></el-table-column>
        <el-table-column prop="addressId" label="地址ID"></el-table-column>
        <el-table-column prop="employeeId" label="员工ID"></el-table-column>
         <el-table-column label="操作" width="150" align="center">
          <template v-slot="scope">
            <el-button type="text"  @click="toDetailHandler(scope.row.id)" >详情</el-button>
            <el-button type="text" @click="deleteHandler(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {get,del} from '@/utils/request'
export default {
  data(){
    return {
      orders:[],
      param:{
        id:null,
      },
      dialogVisible:false, 
      form:{},
      orderDetail:{},
      title:'',
    }
  },
  created(){
    // 页面渲染出来后执行查询数据操作
    this.loadData();
  },
  methods:{
    deleteHandler(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "/order/deleteById"
        del(url,{id}).then(resp => {
          this.$message({ type:"success", message:resp.message })
          this.loadData();
        })
      })
      
    },
    loadData(){
      let url = "/order/findAll"
      get(url).then(resp => {
        this.orders = resp.data;
      })
    },
    findById(){
      let url = "/order/findById"
      get(url,this.param).then(resp => {
        let arr = []
        arr.push(resp.data)
        this.orders = arr;
      })
    },
    toEditHandler(){
      this.form = row;
      this.title = "修改文章信息";
      this.dialogVisible = true;
    },    
    // 详情
    toDetailHandler(id){
      console.log(id,111)
      this.$router.push(`orderDetail/${id}`)
    }
  }
}
</script>
